<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>整理一下</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.4/css/bulma.css" integrity="sha512-eFsXLxlvEqjqSgTye2eGiO1DSwSEQLzPafvB1DVoqzxcBDq7R1kyveQBbeH9QQUnXx9V4zKZcvr1Ms6kxkLKjQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    /* 如果需要更彻底的禁用，可以针对html标签 */
    html, body {
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<!-- 新增仓库模态框 -->
<div class="modal" id="addRepoModal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">新增仓库</p>
      <button class="delete" aria-label="close" onclick="closeNewModal()"></button>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">仓库名称</label>
        <div class="control">
          <input class="input" type="text" id="repoName" placeholder="请输入仓库名称">
        </div>
      </div>
      <div class="field">
        <label class="label">仓库类型</label>
        <div class="control">
          <div class="select is-fullwidth">
            <select id="repoType">
              <option value="book">知识库</option>
              <option value="folder">文件夹</option>
              <option value="code-branch">版本控制文件夹</option>
              <option value="archive">收藏夹</option>
              <option value="file-code">代码文件夹</option>
              <option value="project-diagram">项目图</option>
            </select>
          </div>
        </div>
      </div>
      <!-- 仓库权限选择 -->
      <div class="field">
        <label class="label">仓库权限</label>
        <div class="control">
          <label class="radio">
            <input type="radio" name="repoVisibility" value="public" checked>
            公共仓库
          </label>
          <label class="radio" style="margin-left: 1rem;">
            <input type="radio" name="repoVisibility" value="private">
            私有仓库
          </label>
        </div>
      </div>
      <div class="field">
        <div class="control">
          <label class="checkbox">
            <input type="checkbox" id="versionControl">
            版本控制
          </label>
          <label class="checkbox" style="margin-left: 1rem;">
            <input type="checkbox" id="projectRepo">
            项目仓库
          </label>
        </div>
      </div>
      <!-- 私有仓库密码输入 -->
      <div class="field" id="passwordField" style="display: none;">
        <label class="label">私有仓库密码</label>
        <div class="control">
          <input class="input" type="password" id="repoPassword" placeholder="请输入私有仓库密码">
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success" onclick="addRepository()" style="margin-right: 1.25rem;">确认</button>
      <button class="button" onclick="closeNewModal()">取消</button>
    </footer>
  </div>
</div>


<!-- 删除仓库模态框 -->
<div class="modal" id="deleteRepoModal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">删除仓库</p>
      <button class="delete" aria-label="close" onclick="closeDeleteModal()"></button>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">选择要删除的仓库</label>
        <div class="control">
          <div class="select is-fullwidth">
            <select id="deleteRepoSelect">
              <!-- 仓库选项将通过JavaScript动态生成 -->
            </select>
          </div>
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-danger" onclick="deleteRepository()" style="margin-right: 1.25rem;">确认删除</button>
      <button class="button" onclick="closeDeleteModal()">取消</button>
    </footer>
  </div>
</div>


<nav class="panel">
  <p class="panel-heading" style="border-radius:0 0 0 0 ">主仓库</p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" placeholder="搜索一下" id="searchInput" onchange="searchRepositories()" />
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <p class="panel-tabs">
    <a onclick="switchTab(this, 'all')">全部仓库</a>
    <a class="is-active" onclick="switchTab(this, 'public')">公共仓库</a>
    <a onclick="switchTab(this, 'private')">私有仓库</a>
    <a onclick="switchTab(this, 'project')">项目仓库</a>
    <a onclick="switchTab(this, 'version')">版本控制</a>
  </p>
  <!-- 由JavaScript生成的仓库列表 -->
  <div id="repository-list">
    <!-- 仓库项将在这里动态生成 -->
  </div>
  <div class="panel-block">
    <button class="button is-success is-outlined is-fullwidth" onclick="openNewModal()">
      新增仓库
    </button>
  </div>
  <div class="panel-block">
    <button class="button is-danger is-outlined is-fullwidth" onclick="openDeleteModal()">
      删除仓库
    </button>
  </div>
</nav>
<script>
// 标签页切换功能
function switchTab(element, tabType) {
  // 移除所有标签的激活状态
  const tabs = document.querySelectorAll('.panel-tabs a');
  tabs.forEach(tab => {
    tab.classList.remove('is-active');
  });

  // 为点击的标签添加激活状态
  element.classList.add('is-active');

  // 更新当前标签页类型
  currentTabType = tabType;

  // 根据标签类型过滤并重新渲染仓库列表
  renderRepositories(tabType);
}

// 定义仓库数据
let repositories = [
  { name: "公开的秘密", type: "book", auth:"public" },
  { name: "公开的秘密 + 版本仓库", type: "code-branch" , auth:"public|version"},
  { name: "私有 + 版本仓库", type: "code-branch",auth:"private|version" },
  { name: "项目 + 版本仓库 私有", type: "code-branch" ,auth:"private|version|project"},
  { name: "私有", type: "archive",auth:"private" },
  { name: "私有", type: "code-branch",auth:"private" }
];

// 当前激活的标签页类型
let currentTabType = 'public';

// 可用的图标列表
const iconTypes = [
  "fas fa-book",
  "fas fa-code-branch",
  "fas fa-folder",
  "fas fa-archive",
  "fas fa-file-code",
  "fas fa-project-diagram"
];

// 生成随机图标
function getRandomIcon() {
  const randomIndex = Math.floor(Math.random() * iconTypes.length);
  return iconTypes[randomIndex];
}

// 打开新增模态框
function openNewModal() {
  document.getElementById('addRepoModal').classList.add('is-active');
}

// 关闭新增模态框
function closeNewModal() {
  document.getElementById('addRepoModal').classList.remove('is-active');
  // 清空输入框
  document.getElementById('repoName').value = '';
}

// 打开删除模态框
function openDeleteModal() {
  // 更新仓库选择列表
  updateDeleteRepoList();
  document.getElementById('deleteRepoModal').classList.add('is-active');
}

// 关闭删除模态框
function closeDeleteModal() {
  document.getElementById('deleteRepoModal').classList.remove('is-active');
}

// 新增仓库
function addRepository() {
  const name = document.getElementById('repoName').value.trim();
  const type = document.getElementById('repoType').value;

  // 获取权限设置
  const visibility = document.querySelector('input[name="repoVisibility"]:checked').value;
  const versionControl = document.getElementById('versionControl').checked;
  const projectRepo = document.getElementById('projectRepo').checked;

  // 构建auth字段
  let authParts = [visibility]; // public 或 private
  if (versionControl) authParts.push('version');
  if (projectRepo) authParts.push('project');
  const auth = authParts.join('|');

  if (!name) {
    alert('请输入仓库名称');
    return;
  }

  // 如果是私有仓库，需要验证密码
  if (visibility === 'private') {
    const password = document.getElementById('repoPassword').value.trim();
    if (!password) {
      alert('请输入私有仓库密码');
      return;
    }
    // 这里可以添加实际的密码验证逻辑
    // 为了演示，我们假设密码正确
  }

  // 添加到仓库数组
  repositories.push({
    name: name,
    type: type,
    auth: auth
  });

  // 重新渲染仓库列表（获取当前激活的标签页）
  const activeTab = document.querySelector('.panel-tabs a.is-active');
  // 修复：正确获取当前标签页类型
  let tabType = 'public'; // 默认值
  if (activeTab) {
    // 从onclick属性中提取tabType参数
    const onclickAttr = activeTab.getAttribute('onclick');
    if (onclickAttr) {
      const match = onclickAttr.match(/'([^']+)'/);
      if (match && match[1]) {
        tabType = match[1];
      }
    }
  }
  renderRepositories(tabType);

  // 关闭模态框并清空输入
  closeNewModal();
}

// 监听私有仓库选择变化，显示/隐藏密码输入框
document.addEventListener('DOMContentLoaded', function() {
  const privateRadio = document.querySelector('input[name="repoVisibility"][value="private"]');
  const publicRadio = document.querySelector('input[name="repoVisibility"][value="public"]');
  const passwordField = document.getElementById('passwordField');

  privateRadio.addEventListener('change', function() {
    if (this.checked) {
      passwordField.style.display = 'block';
    }
  });

  publicRadio.addEventListener('change', function() {
    if (this.checked) {
      passwordField.style.display = 'none';
    }
  });

  renderRepositories('public'); // 默认显示公共仓库
});

// 更新删除仓库列表
function updateDeleteRepoList() {
  const select = document.getElementById('deleteRepoSelect');
  // 清空现有选项
  select.innerHTML = '';

  // 添加仓库选项
  repositories.forEach((repo, index) => {
    const option = document.createElement('option');
    option.value = index;
    option.textContent = repo.name;
    select.appendChild(option);
  });
}

// 删除仓库
function deleteRepository() {
  const select = document.getElementById('deleteRepoSelect');
  const selectedIndex = select.value;

  if (selectedIndex === '') {
    alert('请选择要删除的仓库');
    return;
  }

  // 从数组中删除选中的仓库
  repositories.splice(selectedIndex, 1);

  // 重新渲染仓库列表（获取当前激活的标签页）
  const activeTab = document.querySelector('.panel-tabs a.is-active');
  // 修复：正确获取当前标签页类型
  let tabType = 'public'; // 默认值
  if (activeTab) {
    // 从onclick属性中提取tabType参数
    const onclickAttr = activeTab.getAttribute('onclick');
    if (onclickAttr) {
      const match = onclickAttr.match(/'([^']+)'/);
      if (match && match[1]) {
        tabType = match[1];
      }
    }
  }
  renderRepositories(tabType);

  // 更新删除列表
  updateDeleteRepoList();

  // 关闭模态框
  closeDeleteModal();
}

// 根据权限过滤仓库
function filterRepositoriesByAuth(tabType) {
  if (tabType === 'all') {
    return repositories;
  }

  return repositories.filter(repo => {
    // 如果没有auth字段，默认显示在所有标签页
    if (!repo.auth) return true;

    // 检查auth字段是否包含当前标签页类型
    return repo.auth.split('|').includes(tabType);
  });
}

// 搜索仓库功能
function searchRepositories() {
  const searchTerm = document.getElementById('searchInput').value.trim().toLowerCase();

  // 如果搜索框为空，显示当前标签页的所有仓库
  if (!searchTerm) {
    renderRepositories(currentTabType);
    return;
  }

  // 过滤当前标签页的仓库
  const filteredByAuth = filterRepositoriesByAuth(currentTabType);

  // 进一步根据搜索词过滤
  const searchResults = filteredByAuth.filter(repo =>
    repo.name.toLowerCase().includes(searchTerm)
  );

  // 渲染搜索结果
  renderSearchResults(searchResults);
}

// 渲染搜索结果
function renderSearchResults(results) {
  const container = document.getElementById('repository-list');
  container.innerHTML = ''; // 清空现有内容

  // 如果搜索结果为空，显示提示信息
  if (results.length === 0) {
    const emptyElement = document.createElement('div');
    emptyElement.className = 'panel-block has-text-centered';
    emptyElement.style.height = '40vh'; // 撑开高度
    emptyElement.style.display = 'flex';
    emptyElement.style.alignItems = 'center';
    emptyElement.style.justifyContent = 'center';
    emptyElement.innerHTML = `
      <p class="title is-4 has-text-grey">未找到匹配的仓库</p>
    `;
    container.appendChild(emptyElement);
    return;
  }

  results.forEach((repo, index) => {
    // 如果没有指定图标类型，则使用随机图标
    const iconClass = repo.type ? `fas fa-${repo.type}` : getRandomIcon();

    const repoElement = document.createElement('a');
    // 修复：移除未定义的变量赋值
    repoElement.className = 'panel-block';
    if (index === 0) {
      repoElement.classList.add('is-active'); // 默认第一个为激活状态
    }

    repoElement.innerHTML = `
      <span class="panel-icon">
        <i class="${iconClass}" aria-hidden="true"></i>
      </span>
      ${repo.name}
    `;

    container.appendChild(repoElement);
  });
}

// 渲染仓库列表
function renderRepositories(tabType = 'public') {
  // 更新当前标签页类型
  currentTabType = tabType;

  const container = document.getElementById('repository-list');
  container.innerHTML = ''; // 清空现有内容

  // 根据标签页类型过滤仓库
  const filteredRepositories = filterRepositoriesByAuth(tabType);

  // 如果过滤后的仓库数组为空，显示提示信息
  if (filteredRepositories.length === 0) {
    const emptyElement = document.createElement('div');
    emptyElement.className = 'panel-block has-text-centered';
    emptyElement.style.height = '40vh'; // 撑开高度
    emptyElement.style.display = 'flex';
    emptyElement.style.alignItems = 'center';
    emptyElement.style.justifyContent = 'center';
    emptyElement.innerHTML = `
      <p class="title is-4 has-text-grey">暂无仓库</p>
    `;
    container.appendChild(emptyElement);
    return;
  }

  filteredRepositories.forEach((repo, index) => {
    // 如果没有指定图标类型，则使用随机图标
    const iconClass = repo.type ? `fas fa-${repo.type}` : getRandomIcon();

    const repoElement = document.createElement('a');
    repoElement.className = 'panel-block';
    if (index === 0) {
      repoElement.classList.add('is-active'); // 默认第一个为激活状态
    }

    repoElement.innerHTML = `
      <span class="panel-icon">
        <i class="${iconClass}" aria-hidden="true"></i>
      </span>
      ${repo.name}
    `;

    container.appendChild(repoElement);
  });
}

// 页面加载完成后渲染仓库列表
document.addEventListener('DOMContentLoaded', function() {
  renderRepositories('public'); // 默认显示公共仓库
});
</script>
</body>
</html>